<template>
    <div class="oncard_box" id="onecard">
        <div class="oncard">
            <div id="top">
                <div class="lable">卡号：</div>
                <el-input placeholder="支持中石化充值卡" type="number" v-model="input1" :class="{'grey':input1 == ''}" clearable></el-input>
                <div class="lable">卡种：</div>
                <el-select v-model="optionValue1" :class="{'grey':optionValue1 == ''}" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </div>
            <div>
                <div class="lable">密码：</div>
                <el-input placeholder="请输入密码" v-model="input2" :class="{'grey':input2 == ''}" :type="pwdType">
                    <i class="el-input__icon iconfont" :class="[flag ? 'icon-yanjing1':'icon-yanjing-copy']" slot="suffix" @click="flag = !flag,changeType()"></i>
                </el-input>
            </div>
            <div>
                <div class="lable">商品面额：</div>
                <ul class="value_ul">
                    <li v-for="(item,index) in faceValue" :key="index" @click="click(item,index)">
                        <div :class="{cheack:cheacked == item.worth}" class="border">{{item.worth}}元</div>
                    </li>
                </ul>
            </div>
            <div>
                <div class="lable">供货折扣：</div>
                <el-input placeholder="请输入供货折扣" type="number" v-model="input3" :class="{'grey':input3 == ''}" clearable></el-input>
                <div class="zhekou">折</div>
            </div>
            <div class="commit">
                <el-button @click="commitInfo">确认提交</el-button>
            </div>
            <div class="prompt">
                <div>
                    <img src="../../../../assets/i.png" alt="">
                    <span>温馨提示</span>
                </div>
                <p>1.请精准填写所供卡号与密码相对应且真实有效，否则可能导致无法结算，给您带来损失。</p>
                <p>2.全国话费充值卡可指定省份消耗，请精确选择销卡地区，以免给您带来不必要的损失。</p>
                <p>3.所有充值卡默认消耗时间为7天，您也可随时查看销卡动态。</p>
            </div>
        </div>
    </div>
</template>
<script>
    import Public from '../../../../until/public';
    import { getValue, oneCard } from '@/until/getData';
    export default {
		data() {
			return {
                input1: "",             // 卡号
                input2: "",             // 密码
                input3: "",             // 供货折扣
                flag: false,            // 用于判断显示什么图标
                pwdType: "password",    // 改变密码输入框的类型
                kazhong: '中国石化',     // 卡种
                faceValue: [],
                options1: [
                    {value: '4',label: '中国石化'}
                ],
                cheacked: 0,             // 选择的面额大小
                optionValue1: '4'        // 运营商
            }
        },
        mounted () {
            let data = {
                operator: '4'
            }
            this.getWorth(data);
        },
        watch: {
            optionValue1(){
                let data = {};
                if (this.optionValue1 === '4') {
                    data.operator = '4';
                    this.getWorth(data);
                    this.kazhong = '中国石化';
                    this.$emit('cardType', '中国石化');
                } else if (this.optionValue1 === '5') {
                    data.operator = '5';
                    this.getWorth(data);
                    this.kazhong = '中国石油';
                    this.$emit('cardType', '中国石油');
                }
            }
        },
        methods:{
            click(item){
                this.cheacked = item.worth;
            },
            commitInfo(){
                let token = Public.getToken();
                if (this.input1 == '') {
                    Public.topAlert('warning', '请输入卡号');
                    return;
                } else if (this.input2 == '') {
                    Public.topAlert('warning', '请输入密码');
                    return;
                } else if (this.cheacked == 0) {
                    Public.topAlert('warning', '请选择商品面额');
                    return;
                }else if (this.input3 == '') {
                    Public.topAlert('warning', '请输入供卡折扣');
                    return;
                } else {
                    this.isDisabled = true;
                    this.faceValue.forEach((item) => {
                        if (this.cheacked === item.worth) {
                            let height;
                            let low;
                            if (item.discount_high.length == '3' && item.discount_low.length == '3') {
                                low = (eval(item.discount_high)/100).toFixed(3);
                                height = (eval(item.discount_low)/100).toFixed(3);
                            } else if (item.discount_high.length == '4' && item.discount_low.length == '4') {
                                low = (eval(item.discount_high)/1000).toFixed(3);
                                height = (eval(item.discount_low)/1000).toFixed(3);
                            } else if (item.discount_high.length == '3' && item.discount_low.length == '4') {
                                low = (eval(item.discount_high)/100).toFixed(3);
                                height = (eval(item.discount_low)/1000).toFixed(3);
                            } else if (item.discount_high.length == '4' && item.discount_low.length == '3') {
                                low = (eval(item.discount_high)/1000).toFixed(3);
                                height = (eval(item.discount_low)/100).toFixed(3);
                            }
                            if (eval(this.input3) >= eval(low) && eval(height) >= eval(this.input3)) {
                                let token = Public.getToken();
                                let data = {
                                    card_code: Public.encrypt(this.input1, token),
                                    card_psd: Public.encrypt(this.input2, token),
                                    worth: Public.encrypt(this.cheacked, token),
                                    discount: Public.encrypt(String(Math.ceil((this.input3-0)*1000)), token),
                                    card_type: this.optionValue1,
                                    area: '全国'
                                };
                                const h = this.$createElement;
                                this.$msgbox({
                                    title: '消息提示',
                                    message: h('div', null, [
                                        h('p', {style: 'line-height: 25px'}, '您本次提交的供卡信息如下：（请仔细核对）'),
                                        h('p', {style: 'line-height: 20px'}, [
                                            h('span',null,'卡种：'),
                                            h('span',{style: 'color: red'},this.kazhong)
                                        ]),
                                        h('p', {style: 'line-height: 20px'}, [
                                            h('span',null,'面额：'),
                                            h('span',{style: 'color: red'},this.cheacked+'元')
                                        ]),
                                        h('p', {style: 'line-height: 20px'}, [
                                            h('span',null,'卡号：'),
                                            h('span',{style: 'color: red'},this.input1)
                                        ]),
                                        h('p', {style: 'line-height: 20px'}, [
                                            h('span',null,'密码：'),
                                            h('span',{style: 'color: red'},this.input2)
                                        ]),
                                        h('p', {style: 'line-height: 20px'}, [
                                            h('span',null,'供卡数量：'),
                                            h('span',{style: 'color: red'},'1张')
                                        ]),
                                        h('p', {style: 'line-height: 20px'}, [
                                            h('span',null,'供货折扣：'),
                                            h('span',{style: 'color: red'},this.input3)
                                        ])
                                    ]),
                                    showCancelButton: false,
                                    confirmButtonText: '确定',
                                    customClass: 'ConfirmOneCardInfoMessage'
                                }).then(action => {
                                    oneCard(data).then((res) => {
                                        if (res.code == '1') {
                                            Public.topAlert('success',res.msg);
                                        } else {
                                            Public.topAlert('error',res.msg);
                                        }
                                    }).catch((err) => {
                                        // console.log(err);
                                    });
                                }).catch(action => {
                                    Public.topAlert('error','取消操作');
                                });
                            } else {
                                Public.topAlert('warning','您输入的折扣不符合规则');
                            }
                        }
                    });
                    setTimeout(() => {
                        this.isDisabled = false;
                    }, 1000);
                }
            },
            changeType(){
                if (this.pwdType == "password") {
                    this.pwdType = "text";
                } else {
                    this.pwdType = "password";
                }
            },
            confirm(){
                Public.topAlert('success','提交成功');
            },
            cancel(){
                Public.topAlert('error','取消提交');
            },
            getWorth(data){
                getValue(data).then((res) => {
                    // console.log(res);
                    if (res.code == '1') {
                        this.faceValue = res.msg;
                        this.$emit('discount', res.msg);
                    }
                }).catch((err) => {
                    // console.log(err);
                });
            }
        }
    }
</script>
<style scoped>
    .oncard_box{
        width: 613px;
        height: 563px;
    }
    .oncard_box .oncard{
        width: 613px;
        height: 100%;
    }
    .oncard_box .oncard>div{
        padding-top: 21px;
        display: flex;
    }
    .oncard_box .oncard div .lable{
        line-height: 38px;
        width: 80px;
        text-align: right;
    }
    .value_ul{
        width: 523px;
        display: flex;
        flex-wrap: wrap;
    }
    .value_ul li{
        list-style: none;
        width: 74px;
        height: 40px;
        margin-right: 12px;
    }
    .value_ul li div{
        width: 72px;
        height: 38px;
        text-align: center;
        line-height: 38px;
        cursor: pointer;
        background-color: #f4f4f4;
    }
    .value_ul li:nth-child(n+7){
        padding-top: 12px;
    }
    .zhekou{
        width: 30px;
        line-height: 38px;
        padding-left: 10px;
    }
    .el-button.el-button--default{
        width: 120px;
        height: 38px;
        background-color: #8a63e7;
        color: white;
    }
    .commit{
        margin-left: 80px;
    }
    .oncard_box .oncard .prompt{
        display: block;
        margin-top: 50px;
    }
    .prompt img{
        width: 17px;
        height: 17px;
        vertical-align: top;
        margin-right: 5px;
        margin-top: 3px;
    }
    .prompt span{
        color: #8a63e7;
    }
    .prompt p{
        font-size: 14px;
        line-height: 25px;
    }
    .prompt div{
        margin-bottom: 10px;
    }
    .cheack{
        background-image: url(../../../../assets/xuanzhong.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-color: #8a63e7;
    }
    #top .el-select{
        width: 120px;
    }
</style>